<template>
  <div class="container mx-auto">
    <!-- 页面标题 -->
    <div class="mb-6">
      <p class="text-gray-500 mt-1">查看和管理所有碳积分交易记录</p>
    </div>

    <!-- 交易统计 -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
      <div class="bg-white rounded-lg shadow p-6">
        <div class="flex items-center justify-between">
          <div>
            <p class="text-gray-500 text-sm">本月总交易量</p>
            <h3 class="text-2xl font-bold text-gray-800 mt-1">¥2,458,300</h3>
          </div>
          <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-blue-600">
            <i class="fa fa-money text-xl"></i>
          </div>
        </div>
        <div class="mt-4 text-sm">
          <span class="text-green-500 flex items-center">
            <i class="fa fa-arrow-up mr-1"></i> 18% 较上月
          </span>
        </div>
      </div>

      <div class="bg-white rounded-lg shadow p-6">
        <div class="flex items-center justify-between">
          <div>
            <p class="text-gray-500 text-sm">本月积分交易总量</p>
            <h3 class="text-2xl font-bold text-gray-800 mt-1">42,650</h3>
          </div>
          <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center text-green-600">
            <i class="fa fa-exchange text-xl"></i>
          </div>
        </div>
        <div class="mt-4 text-sm">
          <span class="text-green-500 flex items-center">
            <i class="fa fa-arrow-up mr-1"></i> 12% 较上月
          </span>
        </div>
      </div>

      <div class="bg-white rounded-lg shadow p-6">
        <div class="flex items-center justify-between">
          <div>
            <p class="text-gray-500 text-sm">平均交易单价</p>
            <h3 class="text-2xl font-bold text-gray-800 mt-1">¥57.64</h3>
          </div>
          <div class="w-12 h-12 rounded-full bg-amber-100 flex items-center justify-center text-amber-600">
            <i class="fa fa-line-chart text-xl"></i>
          </div>
        </div>
        <div class="mt-4 text-sm">
          <span class="text-red-500 flex items-center">
            <i class="fa fa-arrow-down mr-1"></i> 2% 较上月
          </span>
        </div>
      </div>
    </div>

    <!-- 筛选和搜索 -->
    <div class="bg-white rounded-lg shadow p-6 mb-6">
      <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">交易状态</label>
          <select
              v-model="selectedStatus"
              class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500"
              @change="filterTransactions"
          >
            <option value="">全部状态</option>
            <option value="pending">待确认</option>
            <option value="completed">已完成</option>
            <option value="cancelled">已取消</option>
          </select>
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">交易类型</label>
          <select
              v-model="selectedType"
              class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500"
              @change="filterTransactions"
          >
            <option value="">全部类型</option>
            <option value="buy">买入</option>
            <option value="sell">卖出</option>
          </select>
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">日期范围</label>
          <div class="flex space-x-2">
            <input
                type="date"
                v-model="startDate"
                class="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500"
            >
            <span class="flex items-center text-gray-500">至</span>
            <input
                type="date"
                v-model="endDate"
                class="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500"
            >
          </div>
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">搜索交易</label>
          <div class="relative">
            <input
                type="text"
                placeholder="输入交易ID/厂商名称..."
                class="pl-10 pr-4 py-2 w-full border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500"
                v-model="searchKeyword"
                @input="filterTransactions"
            >
            <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
          </div>
        </div>
      </div>
      <div class="mt-4 flex justify-end space-x-3">
        <button
            class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 flex items-center"
            @click="resetFilters"
        >
          <i class="fa fa-refresh mr-2"></i> 重置筛选
        </button>
        <button
            class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors flex items-center"
        >
          <i class="fa fa-download mr-2"></i> 导出数据
        </button>
      </div>
    </div>

    <!-- 交易记录列表 -->
    <div class="bg-white rounded-lg shadow mb-6">
      <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
          <thead class="bg-gray-50">
          <tr>
            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">交易ID</th>
            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">买方</th>
            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">卖方</th>
            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">积分数量</th>
            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">单价(¥)</th>
            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">交易金额</th>
            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">交易时间</th>
            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
            <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
          </tr>
          </thead>
          <tbody class="bg-white divide-y divide-gray-200">
          <tr v-for="(transaction, index) in filteredTransactions" :key="transaction.id" class="hover:bg-gray-50 transition-colors">
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ transaction.id }}</td>
            <td class="px-6 py-4 whitespace-nowrap">
              <div class="flex items-center">
                <div class="h-8 w-8 flex-shrink-0">
                  <img class="h-8 w-8 rounded-full" :src="transaction.buyerAvatar" :alt="transaction.buyer">
                </div>
                <div class="ml-3">
                  <div class="text-sm text-gray-900">{{ transaction.buyer }}</div>
                  <div class="text-xs text-gray-500" v-if="transaction.buyerType === 'user'">个人用户</div>
                  <div class="text-xs text-gray-500" v-if="transaction.buyerType === 'company'">厂商账号</div>
                </div>
              </div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
              <div class="flex items-center">
                <div class="h-8 w-8 flex-shrink-0">
                  <img class="h-8 w-8 rounded-full" :src="transaction.sellerAvatar" :alt="transaction.seller">
                </div>
                <div class="ml-3">
                  <div class="text-sm text-gray-900">{{ transaction.seller }}</div>
                  <div class="text-xs text-gray-500" v-if="transaction.sellerType === 'user'">个人用户</div>
                  <div class="text-xs text-gray-500" v-if="transaction.sellerType === 'company'">厂商账号</div>
                </div>
              </div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ transaction.amount }}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ transaction.price.toFixed(2) }}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">¥{{ transaction.total.toFixed(2) }}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ transaction.time }}</td>
            <td class="px-6 py-4 whitespace-nowrap">
                <span
                    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full"
                    :class="transaction.status === 'pending' ? 'bg-amber-100 text-amber-800' :
                         transaction.status === 'completed' ? 'bg-green-100 text-green-800' :
                         'bg-red-100 text-red-800'"
                >
                  {{ transaction.status === 'pending' ? '待确认' :
                    transaction.status === 'completed' ? '已完成' : '已取消' }}
                </span>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
              <button class="text-amber-600 hover:text-amber-900 mr-3" @click="viewTransactionDetails(transaction)">详情</button>
              <button
                  class="text-red-600 hover:text-red-900"
                  @click="cancelTransaction(index)"
                  v-if="transaction.status === 'pending'"
              >
                取消
              </button>
            </td>
          </tr>
          <tr v-if="filteredTransactions.length === 0">
            <td colspan="9" class="px-6 py-10 text-center text-gray-500">
              <i class="fa fa-search fa-2x mb-2"></i>
              <p>未找到匹配的交易记录</p>
            </td>
          </tr>
          </tbody>
        </table>
      </div>

      <!-- 分页 -->
      <div class="px-6 py-4 border-t border-gray-200 bg-gray-50 flex items-center justify-between">
        <div class="text-sm text-gray-700">
          显示 <span class="font-medium">1</span> 到 <span class="font-medium">{{ Math.min(10, filteredTransactions.length) }}</span> 条，共 <span class="font-medium">{{ filteredTransactions.length }}</span> 条
        </div>
        <div class="flex space-x-2">
          <button class="px-3 py-1 border border-gray-300 rounded-md text-sm text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50" disabled>上一页</button>
          <button class="px-3 py-1 border border-gray-300 rounded-md text-sm text-white bg-emerald-600 hover:bg-emerald-700">1</button>
          <button class="px-3 py-1 border border-gray-300 rounded-md text-sm text-gray-700 bg-white hover:bg-gray-50">2</button>
          <button class="px-3 py-1 border border-gray-300 rounded-md text-sm text-gray-700 bg-white hover:bg-gray-50">3</button>
          <button class="px-3 py-1 border border-gray-300 rounded-md text-sm text-gray-700 bg-white hover:bg-gray-50">下一页</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 交易详情弹窗 -->
  <div v-if="showTransactionDetailModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
    <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl p-6 transform transition-all max-h-[90vh] overflow-y-auto">
      <div class="flex justify-between items-center mb-4">
        <h3 class="text-lg font-semibold text-gray-800">交易详情</h3>
        <button @click="showTransactionDetailModal = false" class="text-gray-400 hover:text-gray-500">
          <i class="fa fa-times"></i>
        </button>
      </div>

      <div class="border-b border-gray-200 pb-4 mb-4">
        <div class="flex justify-between items-center mb-2">
          <span class="text-sm text-gray-500">交易ID</span>
          <span class="text-sm font-medium text-gray-900">{{ selectedTransaction.id }}</span>
        </div>
        <div class="flex justify-between items-center mb-2">
          <span class="text-sm text-gray-500">交易时间</span>
          <span class="text-sm font-medium text-gray-900">{{ selectedTransaction.time }}</span>
        </div>
        <div class="flex justify-between items-center">
          <span class="text-sm text-gray-500">交易状态</span>
          <span
              class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full"
              :class="selectedTransaction.status === 'pending' ? 'bg-amber-100 text-amber-800' :
                   selectedTransaction.status === 'completed' ? 'bg-green-100 text-green-800' :
                   'bg-red-100 text-red-800'"
          >
            {{ selectedTransaction.status === 'pending' ? '待确认' :
              selectedTransaction.status === 'completed' ? '已完成' : '已取消' }}
          </span>
        </div>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
        <div>
          <h4 class="text-sm font-medium text-gray-500 mb-3">买方信息</h4>
          <div class="flex items-center mb-3">
            <div class="h-12 w-12 flex-shrink-0">
              <img class="h-12 w-12 rounded-full" :src="selectedTransaction.buyerAvatar" :alt="selectedTransaction.buyer">
            </div>
            <div class="ml-3">
              <div class="text-base font-medium text-gray-900">{{ selectedTransaction.buyer }}</div>
              <div class="text-sm text-gray-500">
                {{ selectedTransaction.buyerType === 'user' ? '个人用户' : '厂商账号' }}
              </div>
            </div>
          </div>
          <div class="space-y-2 text-sm">
            <div class="flex justify-between">
              <span class="text-gray-500">联系人</span>
              <span class="text-gray-900">{{ selectedTransaction.buyerContact }}</span>
            </div>
            <div class="flex justify-between">
              <span class="text-gray-500">联系电话</span>
              <span class="text-gray-900">{{ selectedTransaction.buyerPhone }}</span>
            </div>
            <div class="flex justify-between">
              <span class="text-gray-500">邮箱</span>
              <span class="text-gray-900">{{ selectedTransaction.buyerEmail }}</span>
            </div>
          </div>
        </div>

        <div>
          <h4 class="text-sm font-medium text-gray-500 mb-3">卖方信息</h4>
          <div class="flex items-center mb-3">
            <div class="h-12 w-12 flex-shrink-0">
              <img class="h-12 w-12 rounded-full" :src="selectedTransaction.sellerAvatar" :alt="selectedTransaction.seller">
            </div>
            <div class="ml-3">
              <div class="text-base font-medium text-gray-900">{{ selectedTransaction.seller }}</div>
              <div class="text-sm text-gray-500">
                {{ selectedTransaction.sellerType === 'user' ? '个人用户' : '厂商账号' }}
              </div>
            </div>
          </div>
          <div class="space-y-2 text-sm">
            <div class="flex justify-between">
              <span class="text-gray-500">联系人</span>
              <span class="text-gray-900">{{ selectedTransaction.sellerContact }}</span>
            </div>
            <div class="flex justify-between">
              <span class="text-gray-500">联系电话</span>
              <span class="text-gray-900">{{ selectedTransaction.sellerPhone }}</span>
            </div>
            <div class="flex justify-between">
              <span class="text-gray-500">邮箱</span>
              <span class="text-gray-900">{{ selectedTransaction.sellerEmail }}</span>
            </div>
          </div>
        </div>
      </div>

      <div class="bg-gray-50 p-4 rounded-lg mb-6">
        <h4 class="text-sm font-medium text-gray-500 mb-3">交易信息</h4>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
          <div>
            <p class="text-gray-500">积分数量</p>
            <p class="text-xl font-bold text-gray-900 mt-1">{{ selectedTransaction.amount }} 积分</p>
          </div>
          <div>
            <p class="text-gray-500">交易单价</p>
            <p class="text-xl font-bold text-gray-900 mt-1">¥{{ selectedTransaction.price.toFixed(2) }}</p>
          </div>
          <div>
            <p class="text-gray-500">交易总额</p>
            <p class="text-xl font-bold text-gray-900 mt-1">¥{{ selectedTransaction.total.toFixed(2) }}</p>
          </div>
        </div>
      </div>

      <div v-if="selectedTransaction.status === 'completed'">
        <h4 class="text-sm font-medium text-gray-500 mb-3">交易凭证</h4>
        <div class="border border-gray-200 rounded-lg p-4 text-sm">
          <div class="flex justify-between mb-2">
            <span class="text-gray-500">交易完成时间</span>
            <span class="text-gray-900">{{ selectedTransaction.completeTime }}</span>
          </div>
          <div class="flex justify-between mb-2">
            <span class="text-gray-500">交易凭证编号</span>
            <span class="text-gray-900">{{ selectedTransaction.certificateId }}</span>
          </div>
          <div class="mt-3 flex justify-center">
            <button class="px-4 py-2 bg-blue-100 text-blue-800 rounded-md hover:bg-blue-200 transition-colors text-sm">
              <i class="fa fa-download mr-1"></i> 下载交易凭证
            </button>
          </div>
        </div>
      </div>

      <div v-if="selectedTransaction.status === 'cancelled'">
        <h4 class="text-sm font-medium text-gray-500 mb-3">取消原因</h4>
        <div class="border border-gray-200 rounded-lg p-4 text-sm bg-red-50">
          <p class="text-gray-900">{{ selectedTransaction.cancelReason || '未提供取消原因' }}</p>
          <p class="text-gray-500 mt-2">取消时间: {{ selectedTransaction.cancelTime }}</p>
        </div>
      </div>
    </div>
  </div>

  <!-- 取消交易确认弹窗 -->
  <div v-if="showCancelConfirmModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
    <div class="bg-white rounded-lg shadow-xl w-full max-w-md p-6 transform transition-all">
      <div class="flex justify-between items-center mb-4">
        <h3 class="text-lg font-semibold text-gray-800">取消交易</h3>
        <button @click="showCancelConfirmModal = false" class="text-gray-400 hover:text-gray-500">
          <i class="fa fa-times"></i>
        </button>
      </div>
      <p class="text-gray-600 mb-4">确定要取消交易 <span class="font-medium">{{ cancelTransactionId }}</span> 吗？此操作不可撤销。</p>
      <div class="mb-4">
        <label class="block text-sm font-medium text-gray-700 mb-1">取消原因</label>
        <textarea
            v-model="cancelReason"
            rows="3"
            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500"
            placeholder="请输入取消原因..."
        ></textarea>
      </div>
      <div class="flex justify-end space-x-3">
        <button @click="showCancelConfirmModal = false" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50">取消</button>
        <button @click="confirmCancelTransaction" class="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700">确认取消</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

// 交易记录数据
const transactions = ref([
  {
    id: 'TX20250908001',
    buyer: '恒通制造',
    buyerAvatar: 'https://picsum.photos/id/1030/40/40',
    buyerType: 'company',
    buyerContact: '刘强',
    buyerPhone: '13912345678',
    buyerEmail: 'liuqiang@hengtong.com',
    seller: '绿色能源科技',
    sellerAvatar: 'https://picsum.photos/id/1025/40/40',
    sellerType: 'company',
    sellerContact: '张明',
    sellerPhone: '13800138000',
    sellerEmail: 'contact@greenenergy.com',
    amount: 500,
    price: 58.6,
    total: 29300,
    time: '2025-09-08 10:23',
    status: 'completed',
    completeTime: '2025-09-08 10:30',
    certificateId: 'CERT20250908001'
  },
  {
    id: 'TX20250908002',
    buyer: '东方化工',
    buyerAvatar: 'https://picsum.photos/id/1031/40/40',
    buyerType: 'company',
    buyerContact: '陈明',
    buyerPhone: '13787654321',
    buyerEmail: 'chenming@dongfang.com',
    seller: '环保建材集团',
    sellerAvatar: 'https://picsum.photos/id/1028/40/40',
    sellerType: 'company',
    sellerContact: '赵强',
    sellerPhone: '13600136000',
    sellerEmail: 'zhaoqiang@ecobuild.com',
    amount: 300,
    price: 60.2,
    total: 18060,
    time: '2025-09-08 09:15',
    status: 'completed',
    completeTime: '2025-09-08 09:22',
    certificateId: 'CERT20250908002'
  },
  {
    id: 'TX20250907056',
    buyer: '南方电子',
    buyerAvatar: 'https://picsum.photos/id/1032/40/40',
    buyerType: 'company',
    buyerContact: '王丽',
    buyerPhone: '13567890123',
    buyerEmail: 'wangli@nanfang.com',
    seller: '可持续农业发展',
    sellerAvatar: 'https://picsum.photos/id/1029/40/40',
    sellerType: 'company',
    sellerContact: '陈静',
    sellerPhone: '13500135000',
    sellerEmail: 'chenjing@sustagri.com',
    amount: 800,
    price: 48.5,
    total: 38800,
    time: '2025-09-07 16:42',
    status: 'completed',
    completeTime: '2025-09-07 16:50',
    certificateId: 'CERT20250907056'
  },
  {
    id: 'TX20250907055',
    buyer: '华宇集团',
    buyerAvatar: 'https://picsum.photos/id/1033/40/40',
    buyerType: 'company',
    buyerContact: '周健',
    buyerPhone: '13456789012',
    buyerEmail: 'zhoujian@huayu.com',
    seller: '蓝天制造集团',
    sellerAvatar: 'https://picsum.photos/id/1026/40/40',
    sellerType: 'company',
    sellerContact: '李华',
    sellerPhone: '13900139000',
    sellerEmail: 'info@bluesky.com',
    amount: 1200,
    price: 62.3,
    total: 74760,
    time: '2025-09-07 14:30',
    status: 'completed',
    completeTime: '2025-09-07 14:38',
    certificateId: 'CERT20250907055'
  },
  {
    id: 'TX20250908003',
    buyer: '李四',
    buyerAvatar: 'https://picsum.photos/id/1013/40/40',
    buyerType: 'user',
    buyerContact: '李四',
    buyerPhone: '13898765432',
    buyerEmail: 'lisi@example.com',
    seller: '绿色能源科技',
    sellerAvatar: 'https://picsum.photos/id/1025/40/40',
    sellerType: 'company',
    sellerContact: '张明',
    sellerPhone: '13800138000',
    sellerEmail: 'contact@greenenergy.com',
    amount: 50,
    price: 58.6,
    total: 2930,
    time: '2025-09-08 11:45',
    status: 'pending'
  },
  {
    id: 'TX20250906042',
    buyer: '赵六',
    buyerAvatar: 'https://picsum.photos/id/1015/40/40',
    buyerType: 'user',
    buyerContact: '赵六',
    buyerPhone: '13654321098',
    buyerEmail: 'zhaoliu@example.com',
    seller: '环保建材集团',
    sellerAvatar: 'https://picsum.photos/id/1028/40/40',
    sellerType: 'company',
    sellerContact: '赵强',
    sellerPhone: '13600136000',
    sellerEmail: 'zhaoqiang@ecobuild.com',
    amount: 30,
    price: 60.2,
    total: 1806,
    time: '2025-09-06 10:15',
    status: 'cancelled',
    cancelTime: '2025-09-06 10:20',
    cancelReason: '资金不足，取消交易'
  }
]);

// 筛选条件
const searchKeyword = ref('');
const selectedStatus = ref('');
const selectedType = ref('');
const startDate = ref('');
const endDate = ref('');

// 筛选交易记录
const filteredTransactions = computed(() => {
  return transactions.value.filter(transaction => {
    // 搜索关键词筛选
    const matchesSearch = transaction.id.includes(searchKeyword.value) ||
        transaction.buyer.includes(searchKeyword.value) ||
        transaction.seller.includes(searchKeyword.value);

    // 状态筛选
    const matchesStatus = !selectedStatus.value || transaction.status === selectedStatus.value;

    // 日期范围筛选
    const transactionDate = new Date(transaction.time);
    const matchesStartDate = !startDate.value || transactionDate >= new Date(startDate.value);
    const matchesEndDate = !endDate.value || transactionDate <= new Date(endDate.value);
    const matchesDateRange = matchesStartDate && matchesEndDate;

    return matchesSearch && matchesStatus && matchesDateRange;
  });
});

// 筛选交易方法
const filterTransactions = () => {
  // 计算属性会自动更新
};

// 重置筛选条件
const resetFilters = () => {
  searchKeyword.value = '';
  selectedStatus.value = '';
  selectedType.value = '';
  startDate.value = '';
  endDate.value = '';
};

// 交易详情弹窗
const showTransactionDetailModal = ref(false);
const selectedTransaction = ref({});

const viewTransactionDetails = (transaction) => {
  selectedTransaction.value = transaction;
  showTransactionDetailModal.value = true;
};

// 取消交易相关
const showCancelConfirmModal = ref(false);
const cancelTransactionId = ref('');
const cancelReason = ref('');
const cancelIndex = ref(-1);

const cancelTransaction = (index) => {
  cancelIndex.value = index;
  cancelTransactionId.value = transactions.value[index].id;
  cancelReason.value = '';
  showCancelConfirmModal.value = true;
};

const confirmCancelTransaction = () => {
  if (cancelIndex.value !== -1) {
    transactions.value[cancelIndex.value].status = 'cancelled';
    transactions.value[cancelIndex.value].cancelTime = new Date().toLocaleString();
    transactions.value[cancelIndex.value].cancelReason = cancelReason.value || '未提供原因';
    alert(`交易 ${cancelTransactionId.value} 已取消`);
  }
  showCancelConfirmModal.value = false;
};
</script>
